/*
 * @Description: 移动端菜单
 * @Autor: HuiSir<273250950@qq.com>
 * @Date: 2024-08-16 12:56:45
 * @LastEditTime: 2024-08-17 18:55:07
 */
import { ref } from "../utils/vue.esm.js";
const template = /*html*/ `
    <div class="menu-btn" @click="openMobileMenu">
      <svg t="1723799609837" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4263" width="20" height="20"><path d="M896 307.2h-768a25.6 25.6 0 0 1 0-51.2h768a25.6 25.6 0 0 1 0 51.2zM896 563.2h-768a25.6 25.6 0 0 1 0-51.2h768a25.6 25.6 0 0 1 0 51.2zM896 819.2h-768a25.6 25.6 0 0 1 0-51.2h768a25.6 25.6 0 0 1 0 51.2z" fill="#333" p-id="4264"></path></svg>
    </div>
    <div ref="menuCont" class="menu-cont">
      <div class="title">
       <span>Menu</span>
        <i class="close" @click="closeMobileMenu">×</i>
      </div> 
    </div>
    <div v-if="showMask" class="mask" @click="closeMobileMenu"></div>
`;
export default {
  template,
  setup() {
    const body = document.body;
    const $copyTopMenuList = document
      .querySelector("#TopNav .menu-list")
      ?.cloneNode(true);
    const menuCont = ref(null);
    const showMask = ref(false);

    const openMobileMenu = () => {
      if (!menuCont.value.querySelector("ul.menu-list")) {
        menuCont.value.appendChild($copyTopMenuList);
      }
      showMask.value = true;
      body.classList.add("show-mobile-menu");
    };
    const closeMobileMenu = () => {
      body.classList.remove("show-mobile-menu");
      showMask.value = false;
    };

    return { menuCont, showMask, openMobileMenu, closeMobileMenu };
  },
};
